<div class="loginpage">
    <div class="modal_close"><i>&times;</i></div>
    <div class="login_input">

        <ul>
            <li class="active" id="li1">用户登录</li>
            <li id="li2">用户注册</li>
        </ul>
        <div class="line"></div>
        <div class="login_form" style="display:block">

            <form id="login_email" th:if="${isphone || isemail}">
                <input class="inout1" type="text" name="username" th:attr="placeholder=${isphone && isemail}?'电子邮箱/手机号码':(${isphone}?'手机号码':'电子邮箱')" autocomplete="off" disableautocomplete autofocus data-valid data-must="请输入帐号" /><span></span>
                <input class="inout2" type="password" name="password" placeholder="密码" data-valid data-must="请输入密码" data-length="1-50"/><span></span>
                <div class="auto-forget">
                    <div class="ui-checkbox" th:classappend="${isRemembered} ? 'checked'" ><i></i><span>自动登录</span><input type="hidden" id="rememberMe1" name="rememberMe1" th:value="${isRemembered}?1:0" /></div>
                    <a href="forget.html" class="forget">忘记密码？</a>
                </div>
                <span class="login_error"></span>
                <div class="btn btn_login">登录</div>
            </form>
            <p th:if="!${isphone || isemail}" class="login_close">邮箱/手机登录方式已关闭</p>
            <p>用其他方式登录</p>
           <!-- <ul>
                <li><a href="/alilogin/alipay"  rel="nofollow"><img th:src="@{/img/ali.png}"></a></li>
            </ul>-->
            <div th:each="item :${loginsetlist}" th:remove="tag">
                <li th:if="${item.id==5} and ${item.state==1}"><a href="javascript:;" id="gzhlogin" ><img th:src="@{/img/wx.png}" alt="微信"></a></li>
                <li th:if="${item.id==6} and ${item.state==1}"><a href="/alilogin/alipay"  rel="nofollow"><img th:src="@{/img/ali.png}"></a></li>
            </div>
        </div>
        <div class="register_form">
            <form th:if="${regset.email}>0" id="register_email">
                <input class="inout1" type="text" name="username" placeholder="电子邮箱" autocomplete="off" disableautocomplete data-valid data-must="请填写Email" data-reg="^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9\.-]+\.[a-zA-z\.]{2,6}$" data-reg-msg="请使用电子邮箱" data-sever="/checkPhoneUnique" data-sever-msg="该邮箱已被注册，请直接登录"/><span></span>
                <input class="inout2" type="password" id="password" name="password" placeholder="密码" data-valid data-must="请填写密码" th:attr="data-length=${regset.pwdLength}+'-50',data-length-msg='密码最低'+${regset.pwdLength}+'位',data-reg=${regset.pwdNum} > 0?'\d+':'',data-reg-msg=${regset.pwdNum} > 0?'密码必须包含数字' :'',data-reg1=${regset.pwdLower} > 0?'[a-z]+':'',data-reg-msg1=${regset.pwdLower} > 0?'密码必须包含小写字母' :'',data-reg2=${regset.pwdUpper} > 0?'[A-Z]+':'',data-reg-msg2=${regset.pwdUpper} > 0?'密码必须包含大写字母' :''"><span></span>
                <input class="inout3" type="password" name="password2" placeholder="确认密码" data-valid data-must="请再次输入密码" data-equ="#password"><span></span>
                <input th:if="${regset.invite}>0" class="inout4" type="text" name="finvicode" th:attr="placeholder=${regset.invite}?'邀请码必填':'邀请码选填',data-must=${regset.invite}?'请填写密码':''" autocomplete="off"  disableautocomplete data-valid  data-sever="/c/invicode_valid" data-sever-msg="该邀请码不存在"/><span></span>
                <input class="inout5" type="text" name="yzm" placeholder="验证码" autocomplete="off" disableautocomplete data-valid data-must="请填写验证码" data-sever="/c/yyzm" data-sever-msg="验证码不正确"><span></span>
                <i class="yzm unselect" data-server="/sendcode/email" data-msg="请先输入正确的电子邮箱">获取验证码</i>
                <div class="agree">
                    <div class="ui-checkbox"><i></i><span></span><input type="hidden" name="agree" value="0" /></div>
                    <span>同意【<div th:remove="tag" th:text="${protocol.title}"></div>】</span>
                </div>
                <span class="register_error"></span>
                <div class="btn btn_register">注册</div>
            </form>
            <form th:if="${regset.phone}>0" id="register_phone">
                <input class="inout1" type="text" name="username" placeholder="手机号码" autocomplete="off" disableautocomplete data-valid data-must="请填写手机号码" data-reg="^1\d{10}$" data-reg-msg="请填写正确的手机号码" data-sever="/checkPhoneUnique" data-sever-msg="该手机号码已被注册，请直接登录"/><span></span>
                <input class="inout2" type="password" id="ppassword" name="password" placeholder="密码" data-valid data-must="请填写密码" th:attr="data-length=${regset.pwdLength}+'-50',data-length-msg='密码最低'+${regset.pwdLength}+'位',data-reg=${regset.pwdNum} > 0?'\d+':'',data-reg-msg=${regset.pwdNum} > 0?'密码必须包含数字' :'',data-reg1=${regset.pwdLower} > 0?'[a-z]+':'',data-reg-msg1=${regset.pwdLower} > 0?'密码必须包含小写字母' :'',data-reg2=${regset.pwdUpper} > 0?'[A-Z]+':'',data-reg-msg2=${regset.pwdUpper} > 0?'密码必须包含大写字母' :''"><span></span>
                <input class="inout3" type="password" name="password2" placeholder="确认密码" data-valid data-must="请再次输入密码" data-equ="#ppassword"><span></span>
                <input th:if="${regset.invite}>0" class="inout4" type="text" name="finvicode" placeholder="邀请码必填" autocomplete="off" disableautocomplete data-valid data-must="请填写邀请码" data-sever="/invicode" data-sever-msg="该邀请码不存在"/><span></span>
                <input class="inout5" type="text" name="yzm" placeholder="验证码" autocomplete="off" disableautocomplete data-valid data-must="请填写验证码" data-sever="/yyzm" data-sever-msg="验证码不正确"><span></span>
                <i class="yzm unselect" data-server="/sendcode/phone" data-msg="请先输入正确的手机号码">获取验证码</i>
                <div class="agree">
                    <div class="ui-checkbox"><i></i><span></span><input type="hidden" name="agree" value="0" /></div>
                    <span>同意【<div th:remove="tag" th:text="${protocol.title}"></div>】</span>
                </div>
                <span class="register_error"></span>
                <div class="btn btn_register">注册</div>
            </form>
            <p th:unless="${regset.phone>0 || regset.email>0}" class="register_close">邮箱/手机注册方式已关闭</p>
            <div th:if="${regset.phone>0 && regset.email>0}" th:remove="tag">
                <span class="change_register unselect">切换为<i>邮箱</i>注册</span>
                <script>
                    document.getElementById("register_email").style.display = "none";
                </script>
            </div>
        </div>
    </div>

</div>
<script>
    $(function() {
        $(".login_input #li1").click(function() {
            $(".login_input li").removeClass("active");
            $(this).addClass("active");
            $(".line").css("left", "16%");
            $(".login_form").css("display", "block");
            $(".register_form").css("display", "none");
        });
        $(".login_input #li2").click(function() {
            $(".login_input li").removeClass("active");
            $(this).addClass("active");
            $(".line").css("left", "67%");
            $(".login_form").css("display", "none");
            $(".register_form").css("display", "block");
        });

        $(".change_ewm").click(function() {
            $(".login_input").css("display", "none");
            $(".login_erweima").css("display", "block");
        });
        $(".change_ewm2").click(function() {
            $(".login_input").css("display", "block");
            $(".login_erweima").css("display", "none");
        });

        var register_email = false;
        $(".change_register").click(function() {
            register_email = !register_email;
            $(".register_error").text('');
            if (register_email) {
                $("#register_email").show();
                $("#register_phone").hide();
                $(".change_register i").text("手机");
            } else {
                $("#register_email").hide();
                $("#register_phone").show();
                $(".change_register i").text("邮箱");
            }
        });

        $(".yzm").click(function(e) {
            e.preventDefault();
            var $this = $(this);
            if ($this.hasClass("disable") || $this.hasClass("doing"))
                return;
            $this.addClass("doing");
            
            $(".register_error").text('');

            var $username = $this.parent().find(".inout1");
            var username = $username.val();
            var data_msg = $(this).attr("data-msg");
            var data_server = $(this).attr("data-server");

            if (username && $username.hasClass("ok")) {
                $this.text("发送中...");
                $.post(data_server, { username: username }, function(data) {
                    //$this.text("已发送");
                });

                var t = 60;
                var seti = setInterval(function() {
                    t--;
                    if (t > 0) {
                        $this.text("重新发送(" + t + ")");
                    } else {
                        $this.text("重新发送");
                        $this.removeClass("doing");
                        clearInterval(seti);
                    }
                }, 1000);

            } else {
                $(".register_error").text(data_msg);
                $this.removeClass("doing");
            }
        });

        $(".agree span").click(function() {

            var w_height = $(window).height(),
                w_width = $(window).width();
            Message('<textarea name="content" class="ui-text" style="height:' + w_height / 2 + 'px; width: ' + w_width / 2 + 'px;">' + '[[${protocol.content}]]' + '</textarea>', '【'+'[[${protocol.title}]]'+'】');

        });

        $(".btn_login").click(function() {
            $(".login_error").text('');
            $form = $(this).parent();
            $form.find("input[data-valid]").trigger("change");
            if ($form.find(".error").length !== 0)
                return;
            $.ajax({
                url: "/login",
                type: "post",
                data: $form.serialize(),
                success: function(data) {
                    if (data.code == 0) {
                        if(typeof login_ok === 'function') {
                            login_ok();
                        } else {
                            location.href = location.href;
                        }
                        HideModal();
                    } else {
                        $(".login_error").text(data.msg);
                    }
                }
            });
        });

        $(".btn_register").click(function() {
            $(".register_error").text('');
            $form = $(this).parent();
            $form.find("input[data-valid]").trigger("change");
            if ($form.find(".error").length !== 0)
                return;
            if ($form.find(".ui-checkbox input").val() == 0) {
                $(".register_error").text("您需要同意用户协议，才能注册");
                return;
            }
            $.ajax({
                url: "/register",
                type: "post",
                data: $form.serialize(),
                success: function(data) {
                    if (data == 1) {
                        if(typeof login_ok === 'function') {
                            login_ok();
                        } else {
                            location.href = location.href;
                        }
                        HideModal();
                    } else {
                        $(".register_error").text(data);
                    }
                }
            });
        });

        $(document).on("keydown", function(e) {
            if (e.keyCode == 13) {
                $(".btn_login").click();
            }
        });
    });
</script>
<script>
    $(".modal_close i").click(function() {
        HideModal();
    });
</script>
